画面遷移のアクセシビリティ課題を解決しうる Navigation API への期待
https://gyazo.com/4811efce71b275dc82e6a720722abe3b
はじめに
自己紹介
各フレームワークで対応している
2021年時点なのでアップデートがあるかも
RemixやAstroも触れたい
問題点
ブラウザ側で「終了した」というシグナルが届いていない問題
スクリーンリーダーによっては検知・終了のタイミングが異なる
場合によってはsetTimeoutでタイミングを調整する必要がある
navigation.reload()
リロード操作
The reload() method steps are:
1. Let document be this's relevant Document.
2. If document is null, then return.
3. If document's origin is not same origin-domain with the entry settings object's origin, then throw a "SecurityError" DOMException.
4. Reload document's node navigable.
かつてはlocation.reload()使用する
違い
navigation は状態を保持したものでリロードできるようになる
code:js
await navigation.reload({
info: { animation: "fade-in" },
state: { infoPaneOpen: true },
});
code:js
navigation.addEventListener("navigate", e => {
const focusedIdentifier = computeIdentifierFor(document.activeElement);
navigation.updateCurrentEntry({ ...navigation.currentEntry.getState(), focusedIdentifier });
if (e.canIntercept) {
const handler = figureOutHandler(e);
const focusReset = e.navigationType === "traverse" ? "manual" : "after-transition";
e.intercept({ handler, focusReset });
}
});
navigation.addEventListener("navigatesuccess", () => {
if (navigation.transition.navigationType === "traverse") {
const { focusedIdentifier } = navigation.currentEntry.getState();
const elementToFocus = findByIdentifier(focusedIdentifier);
if (elementToFocus) {
elementToFocus.focus();
}
}
});
JavaScript Navigation API
You can now trigger navigations from your client-side JavaScript via the new navigate() API. Previously transitions only occurred when the user clicked anchor links. With the new navigation API you have complete control over when navigation occurs.
各種フレームワークで搭載されるとアクセシブルなアプリが構築できるようになるかもしれない
関連